<template>
  <div v-loading="loading">
    <queryHead v-if="head" :explain="explain" :result="msg" :time="time" :price="price" @query="query"/>
    <div v-if="lock" style="background-color: #f3f0f0;padding: 5px;border-radius: 5px">
      <table id="sfhy">
        <tbody>
        <tr>
          <td>
            <div class="wc">
              <img src="@/assets/images/report/mon.png">
              <p>前科</p>
              <p class="mg">{{ fxmd == 'A' || fxmd == 'J' || fxmd == 'N' || fxmd == 'R' ? '有命中' : '良好无记录' }}</p>
            </div>
          </td>
          <td>
            <div class="wc">
              <img src="@/assets/images/report/ljg.e0e33905.png">
              <p>涉毒</p>
              <p class="mg">{{ fxmd == 'B' ? '有命中' : '良好无记录' }}</p>
            </div>
          </td>
          <td>
            <div class="wc">
              <img src="@/assets/images/report/rl.png">
              <p>吸毒</p>
              <p class="mg">{{ fxmd == 'C' ? '有命中' : '良好无记录' }}</p>
            </div>
          </td>
          <td>
            <div class="wc">
              <img src="@/assets/images/report/ljg.e0e33905.png">
              <p>其它</p>
              <p class="mg">{{ fxmd == 'F' ? '有命中' : '良好无记录' }}</p>
            </div>
          </td>
        </tr>
        <tr>

          <td>
            <div class="wc">
              <img src="@/assets/images/report/smjg.png">
              <p>经济类前科</p>
              <p class="mg">{{ fxmd == 'J' ? '有命中' : '良好无记录' }}</p>
            </div>
          </td>
          <td>
            <div class="wc">
              <img src="@/assets/images/report/lbs.edc3a807.png">
              <p>侵犯公民人身，民主权利</p>
              <p class="mg">{{ fxmd == 'N' ? '有命中' : '良好无记录' }}</p>
            </div>
          </td>
          <td>
            <div class="wc">
              <img src="@/assets/images/report/ychk.png">
              <p>扰乱公共秩序罪</p>
              <p class="mg">{{ fxmd == 'R' ? '有命中' : '良好无记录' }}</p>
            </div>
          </td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
  import queryHead from "@/views/components/queryHead.vue";
  import {queryRecord, queryData} from "@/api/system/query";

  export default {
    components: {queryHead},
    name: "blxw",
    props: {
      queryData: {
        required: true,
        type: Object
      },
      price: {
        default: null,
        type: Number
      },
      priceType: {
        default: null,
        type: Boolean
      },
      explain: {
        default: null,
        type: String
      },
      head: {
        default: true,
        type: Boolean
      }
    },
    data() {
      return {
        loading: false,
        lock: false,

        msg: undefined,
        time: undefined,

        xrData: ''
      }
    },
    created() {
      this.loading = true
      queryRecord(this.queryData).then(response => {
        this.disResponse(response)
      })
    },

    methods: {
      query() {
        this.loading = true
        queryData(this.queryData).then(response => {
          this.disResponse(response)
        })
      },
      disResponse(response) {
        console.log('--blxw--', response)
        if (response.info) {
          this.time = response.time
          const info = JSON.parse(response.info)
          this.msg = info.retmsg
          if (info.retcode == '000000') {
            this.fxmd = info.retdata.level
            this.lock = true
          } else {
            this.$modal.msg('不良行为查询失败，原因：' + info.retmsg)
          }
        }
        this.loading = false
      }
    }
  };
</script>

<style scoped>

  #sfhy {
    margin: 10px auto;
    width: 100%;
    border-radius: 10px;
  }

  #sfhy td {
    padding: 1px;
    width: 25%;
  }

  .wc {
    background-color: #F8F8F8;
    border-radius: 10px;
    padding: 5px 10px;
  }

  .wc img {
    width: 25px;
    height: 25px;
    vertical-align: middle;
  }

  .wc p {
    display: inline-block;
    font-size: 14px;
  }

  .mg {
    float: right;
    font-weight: bold;
  }

</style>
